<template>
  <div class="fixed">
    <div class="position">大连</div>
    <div class="user_login" @click="goUrl('login')">登录</div>
    <input @click="goUrl('search_input')" class="search_input" placeholder="楼盘名、地铁等">
  </div>
</template>


<script>
export default {
  data () {
    return {
      msg: 'this is fixed'
    }
  },
  methods: {
    goUrl: function(url){
      // 根据项目具体情况,改写目录文件名作为URL地址
      // 开发模式 可以使用相对/绝对路径
      // 生产模式 必须使用相对路径
      // 方法二 采用proxy做代理实现路由适配(仅用于开发模式)
      location.href = "../module/" + url + ".html";
    }
  }
}

  // 判断高度 悬浮添加效果
  document.body.onscroll = function(){
    var top = document.body.scrollTop;
    var fixed = document.querySelector(".fixed");
    if(top > 20){
      fixed.setAttribute("class", "fixed b10");
    }else{
      fixed.setAttribute("class", "fixed");
    }
  };
  
</script>


<style scoped>
.fixed {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 30px;
  padding: 5px 0;
  line-height: 30px;
  color: #42b983;
  text-align: center;
}
.fixed .search_input{
  box-sizing: border-box;
  width: 70%;
  height: 30px;
  padding: 0px 0px 0px 5px;
  border-radius: 2px;
  background: #b3b6be;
  border: none;
  color: #fff;
}
.b10{
  height: 34px;
  background: rgba(248,248,248,.96);
}
.fixed .position, .fixed .user_login{
  position: absolute;
  top: 5px;
  color: #fff;
  font-size: 14px;
}
.fixed.b10 .position, .fixed.b10 .user_login{
  color: #333;
}
.fixed .position{
  left: 10px;
}
.fixed .user_login{
  right: 10px;
}
</style>
